<template>
  <div ref="container" style="height: 100%"></div>
  <el-drawer
      title="编辑节点"
      v-model="drawer"
      :show-close="false"
      :direction="'rtl'"
  >
    <el-form>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label-width="90" label="节点ID">
            <el-input type="text" v-model="currentNode.data.id" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label-width="90" label="规则名称">
            <el-input type="text" v-model="currentNode.data.text.value" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <template v-if="currentNode.data.type=='rect'">
          <el-col :span="12">
            <el-form-item label="逻辑操作">
              <el-select v-model="currentNode.data.properties['op']" default-first-option placeholder="请选择规则类型">
                <el-option label="and" value="and"></el-option>
                <el-option label="or" value="or"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <template v-else-if="currentNode.data.type=='diamond'">
          <el-col :span="12">
            <el-form-item label="数据列">

              <el-select type="text" v-model="currentNode.data.properties['column']" default-first-option>
                <el-option :label="column.columnName+'('+column.comment+')'" v-for="(column,index) in columns"
                           :key="index" :value="column.columnName"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据规则">
              <el-select v-model="currentNode.data.properties['symbol']" default-first-option
                         placeholder="请选择规则类型">
                <el-option label="等于" value="=="></el-option>
                <el-option label="不等于" value="!="></el-option>
                <el-option label="大于" value=">"></el-option>
                <el-option label="小于" value="<"></el-option>
                <el-option label="不等于" value="!="></el-option>
                <el-option label="包含" value="contain"></el-option>
                <el-option label="不包含" value="no_contain"></el-option>
                <el-option label="以...开头" value="startwidth"></el-option>
                <el-option label="不以...开头" value="nostartwidth"></el-option>
                <el-option label="以...结尾" value="endwidth"></el-option>
                <el-option label="不以...结尾" value="noendwidth"></el-option>
                <el-option label="最大长度" value="maxlength"></el-option>
                <el-option label="最小长度" value="minlength"></el-option>
                <el-option label="正则表达式" value="regin"></el-option>
                <el-option label="不为空" value="noNull"></el-option>
                <el-option label="为空" value="isNull"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据值">
              <el-input v-model="currentNode.data.properties['data']" placeholder="数据值"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常信息">
              <el-input v-model="currentNode.data.properties['errormsg']" placeholder="异常信息"/>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </el-drawer>
</template>

<script setup lang="ts" ValueRuleProcess>
import MyGroup from "@/components/ValueRuleProcess/MyGroup";
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import CustomNode from "./node/CustomNodeModel"
import {ref, reactive, defineEmits, onMounted, defineProps, nextTick, computed, watch} from "vue"

import {DndPanel, SelectionSelect, Group, Control, MiniMap, Menu} from "@logicflow/extension";
import {values} from "min-dash";

const emit = defineEmits(["saveData"]);
const props = defineProps({
  value: {
    type: Object,
    default: {}
  },
  columns: {
    type: Array,
    default: []
  }
})
const patternItems = [
  {
    label: '选区',
    icon: '',
    callback: () => {
      lf.value!.extension.selectionSelect.openSelectionSelect();
      lf.value!.once('selection:selected', () => {
        lf.value!.extension.selectionSelect.closeSelectionSelect();
      });
    }
  },
  {
    type: 'circle',
    text: '开始',
    label: '开始节点',
    icon: '',
  },
  {
    type: 'diamond',
    label: '条件',
    text: '条件',
    icon: '',
  },
  {
    type: 'rect',
    label: '条件组',
    text: '条件组',
    icon: '',
  },
  {
    type: 'circle',
    text: '结束',
    label: '结束节点',
    icon: '',
  }
]
const container = ref();
const lf = ref<LogicFlow>();
onMounted(() => {
  lf.value = new LogicFlow({
    container: container.value,
    grid: true,
    plugins: [DndPanel, SelectionSelect, Group, Control, MiniMap, Menu],
  })
  lf.value.setTheme({
    nodeText: {
      color: "#050000",
      overflowMode: "ellipsis",
      lineHeight: 1,
      fontSize: 12,
    },
    polyline: {
      stroke: "#000",
      strokeWidth: 0.5,
    },
    arrow: {
      offset: 5, // 箭头垂线长度
      verticalLength: 5, // 箭头底线长度
    },
    circle: {
      // 圆形样式
      r: 1,
      strokeDasharray: "none",
      stroke: "#b61111",
      strokeWidth: 2,
    },
    diamond: {
      r: 1,
      strokeDasharray: "none",
      stroke: "#40d51d",
      strokeWidth: 2,

    }
  }),
      lf.value.register(CustomNode);
  lf.value.extension.dndPanel.setPatternItems(patternItems);
  lf.value.register(MyGroup);
  lf.value.extension.miniMap.show
  lf.value.extension.control.addItem({
    iconClass: "lf-control-save",
    title: "",
    text: "保存",
    onClick: (lf1, ev) => {
      var graphRawData = lf1.getGraphRawData();
      console.log("图数据：" + graphRawData.toString())
      emit("saveData", graphRawData)
    },
  });
  lf.value.render(props.value)
  //绑定事件
  const {eventCenter} = lf.value.graphModel;
  bindEvent(eventCenter)

})
const currentNode = ref({})
const drawer = ref(false)
const bindEvent = (eventCenter) => {
  eventCenter.on("node:click", (args) => {
    if (args.data.type == 'rect') {
      if (args.data.properties['op'] == undefined) {
        args.data.properties['op'] = 'and'
      }
    }
    if (args.data.type == 'diamond') {
      debugger
      if (args.data.properties['symbol'] == undefined) {
        args.data.properties['symbol'] = '=='
      }
      if (args.data.properties['column'] == undefined) {
        args.data.properties['column'] = props.columns[0]
      }
    }
    currentNode.value = args;
    drawer.value = true
  });
}
watch(currentNode, (now, old) => {
  lf.value.setProperties(currentNode.value.data.id, now.data.properties)
}, {deep: true})

</script>

<style>
.lf-control-save {
  background-image: url()
}
</style>